<template>
  <div class="container">
    <el-container>
      <el-aside>
        <function-roles-trees :treeData="treeData"></function-roles-trees>
      </el-aside>
      <el-main>
        <el-row style="margin-bottom: 12px">
          <function-roles-form @rolesData="sendTableData"
                               @tableLoad="loadingTable"
                               :pageNum="pageNum"
                               :ranNum="ranNum"
                               :pageSize="pageSize"></function-roles-form>
        </el-row>
        <el-row>
          <function-roles-table :tableData="tableData"
                                :tableLoading.sync="tableLoading"
                                @page_num="changePageNum"
                                @addClick="addClick"
                                @editClick="editClick"
                                @treeChange="treeChange"
                                @randnum="tiggerSearch"
                                @sizePage="changePageSize"></function-roles-table>
        </el-row>
      </el-main>
      <function-roles-add :addVisible.sync="addVisible" @randnum="tiggerSearch"></function-roles-add>
      <function-roles-edit :editVisible.sync="editVisible" :editForms="editData"></function-roles-edit>
    </el-container>
  </div>
</template>
<script>
  import FunctionRolesForm from './functionRolesChild/functionRolesForm'
  import FunctionRolesTable from './functionRolesChild/functionRolesTable'
  import FunctionRolesTrees from './functionRolesChild/functionRolesTrees'
  import FunctionRolesAdd from './functionRolesChild/functionRolesAdd'
  import FunctionRolesEdit from './functionRolesChild/functionRolesEdit'
  export default {
    components: { FunctionRolesEdit, FunctionRolesAdd, FunctionRolesTrees, FunctionRolesTable, FunctionRolesForm },
    data() {
      return {
        pageNum: 1,
        pageSize: 10,
        tableData: [],
        editData: [],
        ranNum: 0,
        treeData: {},
        treeLoading: false,
        tableLoading: false,
        addVisible: false,
        editVisible: false
      }
    },
    methods: {
      sendTableData: function(val) {
        this.tableData = val
      },
      changePageNum: function(val) {
        this.pageNum = val
      },
      changePageSize: function(val) {
        this.pageSize = val
      },
      addClick: function(val) {
        this.addVisible = val
      },
      editClick: function(val) {
        this.editData = val[0]
        this.editVisible = val[1]
      },
      treeChange: function(val) {
        this.treeData = val[0]
        this.treeLoading = val[1]
      },
      loadingTable: function(val) {
        this.tableLoading = val
      },
      /* 执行完操作后触发查询 */
      tiggerSearch: function(val) {
        this.ranNum = val
      }
    }
  }
</script>
<style scoped>
  .container{
    padding: 42px;
    padding-top: 20px;
    background-color: rgb(240, 242, 245);
    height: 85vh;
  }
  .el-row{
    background-color: #fff;
  }
  .el-main{
    padding-top: 0;
    margin-top: 0;
  }
  .el-aside{
    overflow: auto;
    height: 85vh;
    background-color: #fff;
  }
</style>
